<script setup>
import dataSourceApi from "@/api/datasource/dataSourceApi";
import { nanoid } from "nanoid";
import processApi from "@/api/process/processApi.js";
import Std from "@/views/std/index.vue";
import { message } from 'ant-design-vue'


const props = defineProps(["dataSourceId", "selectItem"])

const { proxy } = getCurrentInstance();

const tableRef = ref();
const columns = ref([{
	title: '名称',
	key: 'columnName',
	width: 200,
	editor: 'input',
	dataIndex: 'columnName',
	ellipsis: true,
},
{
	title: '类型',
	key: 'columnType',
	width: 150,
	editor: 'slot',
	dataIndex: 'columnType',
	ellipsis: true,
},
{
	title: '长度',
	key: 'columnLength',
	width: 100,
	dataIndex: 'columnLength',
	editor: 'slot',
	ellipsis: true,
},
{
	title: 'comment',
	key: 'comment',
	width: 110,
	editor: 'input',
	dataIndex: 'comment',
	ellipsis: true,
},
{
	title: '是否主键',
	key: 'isPrimary',
	fixed: 'right',
	cellType: 'checkbox',
	slot: 'checkbox',
	mapping: [
			{
				key: true,
				value: '是'
			},
			{
				key: false,
				value: '否'
			}
		]
},
{
	title: '操作',
	key: 'action',
	width: 80,
	fixed: 'right',
	dataIndex: 'action',
	buttonList: [

		{
			click: (field, record) => {
				remove(record)
			},
			render: (record) => {
				return '删除';
			}
		}
	]
},
])

const data = ref([]);

const ddlInfo = ref({
	visible: false,
	ddl: null
});

watch(() => props.selectItem, async (newValue, oldValue) => {
	if (!newValue) {
		return;
	}
	if (newValue.type == 'table') {
		await queryTableList();
	}

})
const queryTableList = async () => {
	const s = await queryTableFieldList(props.selectItem.dataSourceId, props.selectItem.title, props.selectItem.schemaId);
	for (const b of s) {
		b.sourceColumnName = b.columnName;
		b.id = nanoid(5);
	}
	// data.value.length = 0;

	tableRef.value.clearAndPush(s, data.value);
	console.log(data.value)

	// data.value = s;
}


const queryTableFieldList = async (id, tableName, catalogName) => {
	//查询表
	var s = await dataSourceApi.queryTableFieldList({
		id: id,
		catalogName: catalogName,
		tableName: tableName
	});
	return s;
};
const addRow = () => {
	if (!props.dataSourceId) {
		proxy.$message.error('请选择数据源');
		return
	}
	if (!props.selectItem?.dataSourceId) {
		proxy.$message.error('请选择数据源');
		return
	}
	if (props.selectItem?.type != 'table') {
		proxy.$message.error('请选择数据表');
		return
	}
	const id = nanoid(5);

	data.value.push({
		columnName: null,
		columnType: null,
		sourceColumnName: null,
		columnLength: null,
		editorFlag: true,
		id: id
	});
	console.log(data.value)
	// console.log(data.value)
	// alert(3)
}


const cellClick = (field, row) => {
	if (field != 'isPrimary') {
		return
	}

	row.isPrimary = !row.isPrimary
}
const gen = async () => {
	if (!props.dataSourceId) {
		proxy.$message.error('请选择数据源');
		return
	}
	if (!props.selectItem?.dataSourceId) {
		proxy.$message.error('请选择数据源');
		return
	}
	if (props.selectItem?.type != 'table') {
		proxy.$message.error('请选择数据表');
		return
	}
	//先查询出
	// let tableF = await queryTableFieldList(props.selectItem.dataSourceId, props.selectItem.title, props.selectItem.schemaId);
	// if (!tableF) {
	// 	tableF = [];
	// }
	// const addData = [];

	//找出新增的
	// for (const b of data.value) {
	// 	let find = false;
	// 	for (const c of tableF) {
	// 		if (c.columnName == b.sourceColumnName ||
	// 			c.columnName == b.columnName) {
	// 			find = true;
	// 			break;
	// 		}
	// 	}
	// 	if (!find) {
	// 		addData.push(b);
	// 	}
	// }
	// const updateData = [];
	// for (const b of data.value) {
	// 	let find = false;
	// 	for (const c of tableF) {
	// 		if (c.columnName == b.sourceColumnName ||
	// 			c.columnName == b.columnName) {
	// 			find = true;
	// 			break;
	// 		}
	// 	}
	// 	if (find) {
	// 		updateData.push(b);
	// 	}
	// }

	let str = '';
	//	if (addData.length > 0) {
	const s = await dataSourceApi.queryCreateTableFieldList({
		id: props.selectItem.dataSourceId,
		catalogName: props.selectItem.schemaId,
		tableName: props.selectItem.title,
		columnList: data.value
	});
	str = s + '\n';
	//}
	// if (updateData.length > 0) {
	// 	const s = await dataSourceApi.queryUpdateTableFieldList({
	// 		id: props.selectItem.dataSourceId,
	// 		catalogName: props.selectItem.schemaId,
	// 		tableName: props.selectItem.title,
	// 		columnList: updateData
	// 	});
	// 	str = s + '\n';
	//
	// }

	if (str && str != '') {
		ddlInfo.value.ddl = str;
		ddlInfo.value.visible = true;
	}
}

const remove = (row) => {
	data.value = data.value.filter(item => item.id !== row.id)
}
const fieldTypeList = ref([])

onMounted(async () => {
	fieldTypeList.value = await processApi.queryFieldTypeList();
})


const getFieldName = (row) => {
	if (!row.columnType) {
		return
	}
	let result = "";
	for (const fieldType of fieldTypeList.value) {
		if (fieldType.code == row.columnType) {
			result = fieldType.name;
		}
	}
	return result;
}

const addUpdateRemoveFiled = async () => {

	const s = await dataSourceApi.executeDdl({
		id: props.selectItem.dataSourceId,
		catalogName: props.selectItem.schemaId,
		tableName: props.selectItem.title,
		ddl: ddlInfo.value.ddl
	});
	ddlInfo.value.ddl = null;
	ddlInfo.value.visible = false;

	await queryTableList();

}
const stdFlag = ref(false)


const rowDbClick = (d) => {
	data.value.push(d);
	message.info(`添加字段${d.columnName}成功`)
}
</script>

<template>
	<a-card :borderd="false" class="mb-2">
		<a-row justify="end">
			<a-space>
				<Button type="primary" @click="addRow">新增</Button>
				<Button type="default" @click="gen">生成</Button>
				<Button type="default" @click="stdFlag = true;">标准字段库</Button>
			</a-space>
		</a-row>
	</a-card>

	<a-card :borderd="false">
		<h-table ref="tableRef" :columns="columns"
		:cellClick="cellClick" :data="data" height="calc(68vh)">
			<template #columnLength:editor="{ record }">
				<a-input-number id="inputNumber" v-model:value="record.columnLength" />
			</template>
			<template #columnType:editor="{ record }">
				<a-select v-model:value="record.columnType" clearable filterable>
					<a-select-option v-for="item in fieldTypeList" :label="item.name" :value="item.code"
						:key="item.code" />
				</a-select>
			</template>
		</h-table>
	</a-card>


	<a-modal v-model:open="ddlInfo.visible" title="新增、修改、删除字段" @ok="addUpdateRemoveFiled"
		@cancel="ddlInfo.ddl = null; ddlInfo.visible = false" :closable="false">

		<a-form ref="formInline" :model="ddlInfo" inline>
			<a-form-item>
				<a-textarea v-model:value="ddlInfo.ddl" placeholder="请输入ddl语句">
				</a-textarea>
			</a-form-item>
		</a-form>
	</a-modal>

	<a-drawer title="标准字段库" :width="650" :mask="false" :closable="true" v-model:open="stdFlag">
		<Std :editor="false" :rowDbClick="rowDbClick"></Std>
	</a-drawer>
</template>

<style scoped></style>
